<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<%--搜索框--%>
<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">出库人</label>
        <div class="layui-input-inline">
            <input type="text" name="person" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">经手人</label>
        <div class="layui-input-inline">
            <input type="text" name="jsr" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开始时间</label>
        <div class="layui-input-inline">
            <input type="date" name="beginDate" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">结束时间</label>
        <div class="layui-input-inline">
            <input type="date" name="overDate" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-submit lay-filter="mhSel">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<%--备注--%>
<form class="layui-form" id="bz" hidden >
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文本域</label>
        <div class="layui-input-inline">
            <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
    </div>
</form>

<table class="layui-hide" id="test" lay-filter="test"></table>

<div id="sjbg" style="display: none">
    <table class="layui-hide" id="test1" lay-filter="test1"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <%--<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>--%>
    </div>
</script>

<script type="text/html" id="barDemo">
    {{#  if(d.status == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">出库详情</a>
    {{#  } }}
    {{#  if(d.status == 0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">出库详情</a>
    <a class="layui-btn layui-btn-xs " lay-event="guo">通过</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="noguo">不过</a>
    {{#  } }}
    {{#  if(d.status == 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">出库详情</a>
    {{#  } }}
</script>


<script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>

<script>
    layui.use(['table','form','layer','jquery','upload','util'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;
        var util = layui.util;

        function showtable(){
            table.render({
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/chuKuCheck/getAllnotChuKuCheck'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,title: '用户数据表'
                ,cols: [[
                    /*{type: 'checkbox', fixed: 'left'}
                    ,*/{field:'ckjlid', title:'出库记录id', fixed: 'left', hide:true, unresize: true, sort: true}
                    ,{field:'uid', title:'出库人id',hide:true}
                    ,{field:'staffName', title:'出库人'}
                    ,{field:'totalprice', title:'出库金额',sort: true}
                    ,{field:'totalcount', title:'出入数量'}
                    ,{field:'jsr', title:'经手人'}
                    ,{field:'cdate', title:'审核时间',sort: true}
                    ,{field:'status', title:'审核状态',hide:true}
                    ,{field:'remark', title:'备注'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
                ]]
                ,page: true
                ,limit:5
                ,limits:[3,5,10,20]
                ,even:true
            });
        }

        function showtable1(){
            table.render({
                elem: '#test1'
                ,url:'${pageContext.request.contextPath}/chuKuCheck/getChuKuCheck'
                ,title: '用户数据表'
                ,cols: [[
                    /*{type: 'checkbox', fixed: 'left'}*/
                    {field:'cdjlid', title:'出库记录的详情id', fixed: 'left',hide:true, width:100,  unresize: true}
                    ,{field:'bookid', title:'书籍id',hide:true, width:100}
                    ,{field:'bookname', title:'书名', width:150}
                    ,{field:'typeid', title:'书籍类型id', width:100,hide:true}
                    ,{field:'typename', title:'书籍类型', width:100}
                    ,{field:'author', title:'作者', width:100}
                    ,{field:'publisher', title:'出版社', width:150}
                    ,{field:'count', title:'数量', width:100}
                    ,{field:'ckjlid', title:'出库记录id',hide:true, width:100}
                    ,{field:'jsr', title:'经手人', width:100}
                    ,{field:'uid', title:'出库人id', width:100,hide:true}
                    ,{field:'staffName', title:'出库人', width:100}
                    ,{field:'cdate', title:'出库时间', width:150}
                    ,{field:'outprice', title:'单价', width:100}
                ]]
                ,page: true
                ,limit:5
                ,limits:[5,10,20]
                ,even:true
            });
        }



        $(function () {
            showtable();
            //showtable1();
        })

        /*
        *  搜索框的表单提交事件
        * */
        form.on('submit(mhSel)', function(data){
            //数据表格重载
            table.reload('test', {
                where: { //设定异步数据接口的额外参数，任意设
                    person:data.field.person
                    ,jsr:data.field.jsr
                    ,beginDate:data.field.beginDate
                    ,overDate:data.field.overDate
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'edit'){
                showtable1();
                table.reload('test1', {
                    where: { //设定异步数据接口的额外参数，任意设
                        ckjlid:data.ckjlid
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                layer.open({
                    type: 1,
                    title:'出库详情',
                    area: ['1060px', '300px'],
                    anim:6,
                    content: $('#sjbg') //这里content是一个普通的String
                });
            } else if(obj.event === 'guo'){
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath}/chuKuCheck/tongGuo',
                    data:{"ckjlid":data.ckjlid,"status":data.status},
                    dataType:'json',//预期的后台数据类型
                    success:function (data) {
                        if (data.code == "1001"){
                            layer.alert(data.msg, {icon: 1});
                        }else {
                            layer.alert(data.msg, {icon: 5});
                        }
                        showtable();
                    }
                })
            }else if(obj.event === 'noguo'){
                layer.open({
                    type: 1,
                    title:'修改信息',
                    area: 'auto',
                    anim:6,
                    content: $('#bz') //这里content是一个普通的String
                });
                form.on('submit(formDemo)', function(bz){
                    //alert(JSON.stringify(data.field));
                    $.ajax({
                        type:'post',
                        url:'${pageContext.request.contextPath}/chuKuCheck/buguo',
                        data:{"bz":bz.field.desc,"ckjlid":data.ckjlid},
                        dataType:'json',//预期的后台数据类型
                        success:function (data) {
                            if (data.code == "1001"){
                                layer.alert(data.msg, {icon: 1});
                            }else {
                                layer.alert(data.msg, {icon: 5});
                            }
                            showtable();
                        }
                    })
                });
            }
        });
    });
</script>
</body>
</html>